<html>
<head>
    <title>My Domain Timeline List View</title>

    <!-- Include Ext stylesheets here: -->
	<!--<link type="text/css" href="../resources/css/ext-all.css" rel="stylesheet" />-->
	<link type="text/css" href="http://extjs.cachefly.net/ext-2.2/resources/css/ext-all.css" rel="stylesheet" />

    <!-- Include Ext and app-specific scripts: -->
	<!--<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>-->
    <!--<script type="text/javascript" src="../ext-all-debug.js"></script>-->
	<script type="text/javascript" src="http://timegraph.googlecode.com/svn/trunk/ext-base.js"></script>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2/ext-all.js"></script>

	<!-- My files -->
    <link rel="stylesheet" type="text/css" href="styles.css">

	<!-- EXAMPLE with data in external file -->
	<script src="MyDomain_list.js" type="text/javascript"></script>
	<script type="text/javascript">
	Ext.onReady(function() {
		//alert(list);
		//alert(list[10])

		var myReader = new Ext.data.ArrayReader({}, [
			{name: 'id', type:'int'},
			{name: 'nodename'},
			{name: 'nodetype'},
			{name: 'attr1'},
			{name: 'attr2'},
			{name: 'attr3'},
			{name: 'startdate'},
			{name: 'enddate'}
		]);

		var grid = new Ext.grid.GridPanel({
					/*
					store: new Ext.data.GroupingStore({
					            reader: myReader,
					            data: list,
					            sortInfo:{field: 'sptimeline', direction: "ASC"},
					            groupField:'businessprocess'
					}),*/
					store: new Ext.data.Store({
						data: list,
						reader: myReader
					}),
					columns: [
						{header: 'ID', width: 10, sortable: true, dataIndex: 'id'},
						{header: 'Node Name', width: 50, sortable: true, dataIndex: 'nodename'},
						{header: 'Node Type', width: 50, sortable: true, dataIndex: 'nodetype'},
						{header: 'Attribute 1', width: 50, sortable: true, dataIndex: 'attr1'},
						{header: 'Attribute 2', width: 50, sortable: true, dataIndex: 'attr2'},
						{header: 'Attribute 3', width: 50, sortable: true, dataIndex: 'attr3'},
						{header: 'Start Date', width: 50, sortable: true, dataIndex: 'startdate'},
						{header: 'End Date', width: 50, sortable: true, dataIndex: 'enddate'}
					],
					/*
					viewConfig: new Ext.grid.GroupingView({
					            forceFit:true,
					            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
					}),*/
					viewConfig: {
						forceFit: true
					},
					renderTo: 'content',
					title: 'Sub Process Timeline View',
					width: 500,
					autoHeight: true,
					frame: false
				});

		grid.getSelectionModel().selectFirstRow();

	});		// Ext.onReady(...)
	</script>

</head>
<body>
	<h1>My Domain List View</h1>
	<h5>You are at:<a href="index.html">Home</a>/<a href="MyDomain_list.html">List View</a></h5>

    <div id="content">
        
    	<h2>My Domain List view</h2>
    	<p>List of nodes</p>
        
	</div>
</body>
</html>
